<template>
	<view class="index-search" :style="{paddingTop:top}">
		<view v-if="name=='首页'" :style="{display:'flex',height: height}">
			<view class="text" >
				<text>{{city}}</text>
				<view class="image" @click="clickMap" ><image src="../static/location.png" ></image></view>
			</view> 
			<view class="content">
				你想住在哪里？
			</view>
		</view>
		<view v-else :style="{display:'flex',justifyContent:'center',alignItems:'center',width:'100%',height:height}">{{name}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top:"0px",
				height:"0px",
				city:'定位中'
			};
		},
		created() {
			// 头部胶囊布局
			  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			  this.top=menuButtonInfo.top+'px'
			  this.height=menuButtonInfo.height+'px'
			  
			// 获取定位 
			uni.getLocation({
				success:  (res)=> {
					console.log('当前位置的经度' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					// 发送请求
					uni.request({
						url:'https://restapi.amap.com/v3/geocode/regeo',
						data:{
							key:'d6a27debe32eab6c67a158ea8639faaa',
							location: res.longitude+','+ res.latitude	
						},
						success:(res)=>{
							this.city=res.data.regeocode.addressComponent.city
						}
				
					})
				}
			});
		},
		props:["name"],
		methods:{
			clickMap(){
				uni.navigateTo({
					url: '/pages/map/map'
				});
			}
		}
	}
</script>

<style scoped lang="less">
	@base:#2B3082;
	.index-search{
		padding-top: 0;
		background-color:@base ;
		color:#FFFFFF;
		height:50px;
		.text{
			display: flex;
			font-size:14px;
			margin-left: 20rpx;
			justify-content: center;
			align-items: center;
			image{
				padding-left: 4px;
				width: 20px;
				height: 20px;
			}
		}
		.content{
				margin:0 10rpx;
				width:350rpx;
				height: 30px;
				border-radius:30px;
				border:1px solid #333333;
				background-color: #FFFFFF;
		}
	}
	
</style>